<template>
    <div id="addPassenger">
        <NavBarTitle :NavBarTitle="NavBarTitle"/>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="username"
                    name="username"
                    label="姓名"
                    placeholder="与证件姓名一致"
                    clearable
            />
            <van-field
                    readonly
                    clickable
                    label="身份证"
                    placeholder="乘客证件号码"
                    clearable
                    name="idCard"
                    :value="idCard"
                    @touchstart.native.stop="show = true"
            />
            <van-number-keyboard
                    v-model="idCard"
                    :show="show"
                    extra-key="X"
                    close-button-text="完成"
                    @input="onInput"
                    @delete="onDelete"
                    @blur="show = false"
            />
            <van-field
                    v-model="mobile"
                    type="number"
                    name="mobile"
                    label="联系方式"
                    placeholder="联系方式"
                    clearable
            />
            <div style="margin: 82px 12px 0 12px;">
                <van-button block type="info" native-type="submit" color="#0fa0a0" style="font-size:18px;border-radius: 5px">
                    保存
                </van-button>
            </div>
        </van-form>
    </div>
    
</template>

<script>
    import NavBarTitle from 'components/NavBarTitle.vue'
    export default {
        data() {
            return {
                NavBarTitle:'新增乘客',
                show: false,
                username:'',
                idCard:'',
                mobile:'',
            }
        },
        components: {
            NavBarTitle
        },
        methods: {
            onInput(value) {

            },
            onDelete() {

            },
            onSubmit(values){
                if(!(/^1[3456789]\d{9}$/.test(values.mobile))){
                    this.$toast('请输入11位有效手机号!')
                    return false;
                }else {
                    let data = {
                        token: this.$store.state.token,
                        name: values.username,
                        idcard: values.idCard,
                        telephone: values.mobile
                    };
                    this.$axios.post(this.$index+this.$api.user.addcontacts,this.$Qs.stringify(data))
                        .then((res) => {
                            console.log(res);
                            if(res.data.flag){
                                this.$toast.success({
                                    message: res.data.msg,
                                    duration: 1000,
                                    onClose: () => {
                                        this.$router.replace('/CommonInfo');
                                    }
                                });
                            }else {
                                this.$toast(res.data.msg);
                            }
                        }).catch((err) => {
                        console.log(err);
                    })
                }
                console.log(values);

            }
        },
        beforeMount() {

        }
    }
</script>

<style scoped>
    /deep/.van-cell{
        padding: 13px 12px;
    }
</style>